import React from 'react';
import { flowApi } from 'js/api/flow';
import { timeData } from 'js/core/timeData';
import echarts from 'js/lib/echarts';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { hashHistory } from 'react-router';
import './brandFlow.scss';
import api from 'js/api/index';
import { i18n } from 'js/core/i18n';

class Brand extends React.Component {
  constructor() {
    super()
  }
  componentDidMount() {
     this.setChart()
  }
  componentWillReceiveProps() {
    this.setChart()
  }
  setChart = () => {
    let data = this.props.data;
    let option = { textStyle: { fontSize:window.chatFontSize },
      grid: {
        left: '7%',
        top: '10%',
        width: '86%',
        height: '80%',
      },
      xAxis: {
        type: 'category',
        data: data.dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#999', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#999', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: data.dataX.length - 7,
        endValue: data.dataX.length - 1
      },
      series: {
        type: 'line',
        smooth: true,
        label: { normal: { show: true }, color: '#666'  },
        lineStyle: { normal: { color: '#BFB1F7' } },
        data: data.dataY
      }
    }
    this.chart = echarts.init(this.refs.chart);
    this.chart.setOption(option);
  }
  render() {
    let { data, loading } = this.props;
    return <div className="brand">
      <div className="storeHeader flex-vcenter">
        <div className="title"><span className="rank">NO.{data.Num}</span>{data.Name}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        <SubViewLink className="open flex-col-4 text-right" moduleName={'flow'} modelData={{ id: data.DateTypeID, type: data.DateType }} title={data.Name}>{i18n.get("查看详情")}&gt;</SubViewLink>
      </div>
      <div className="chart" ref="chart">
        {loading && <div className="loading"></div>}
      </div>
    </div>
  }
}

class BrandFlow extends React.Component {
  constructor() {
    super()
    this.state = {
      data: [],
      loading: true
    }
  }
  componentDidMount() {
    let time = timeData.getTimeRange('day');
    this.query = {
      timeType: 'day',
      DataType: 1,
    }
    this.FlowBrandAreaSix();
  }
  FlowBrandAreaSix = () => {
    this.setState({ loading: true })
    api('/Flow/FlowBrandAreaSix', this.query).then((data) => {
      this.setState({ data: data.data, loading: false })
    });
  }
  render() {
    return <div id="brandFlow">
      {this.state.data.map(item => {
        return <Brand data={item} loading={this.state.loading} />
      })}
    </div>
  }
}

export default BrandFlow;


